<template>
  <!-- 查询 -->
  <el-form :inline="true" :model="infor" class="demo-form-inline">
    <table>
      <tr>
        <td>
          <el-form-item label="姓名：">
            <el-input
              style="width: 200px"
              v-model="infor.employeeName"
              placeholder="请输入姓名"
              clearable
            />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="部门：">
            <el-select
              style="width: 180px"
              v-model="infor.departmentName"
              placeholder="全部"
              clearable
              @change="bumen"
            >
              <el-option
                v-for="item in Department"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              />
            </el-select>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="职位:">
            <el-select
              style="width: 180px"
              v-model="infor.postsName"
              placeholder="全部"
              clearable
              @change="zhiwei"
            >
              <el-option
                v-for="item in Position"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              />
            </el-select>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="入职日期:">
            <el-date-picker
              v-model="infor.dateonBoard"
              type="date"
              placeholder="Pick a date"
              clearable
            />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="最后工作日期:">
            <el-date-picker
              v-model="infor.createDate"
              type="date"
              placeholder="Pick a date"
              clearable
            />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="审批状态:">
            <el-select
              style="width: 180px"
              v-model="infor.approvalDimission"
              placeholder="全部"
              clearable
            >
              <el-option label="待提交" value="1" />
              <el-option label="待审批" value="2" />
              <el-option label="已同意" value="3" />
              <el-option label="已拒绝" value="4" />
            </el-select>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td>
          <el-form-item style="float-right">
            <el-button type="primary" @click="GetDimission">查询</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </td>
      </tr>
    </table>
  </el-form>
  <!-- 新增删除 -->
  <el-button type="primary" @click="JumptoNew">新增</el-button>
  <el-button type="primary" @click="DeletePersonnel">删除</el-button>
  <el-button type="primary" @click="exportExcel">导出Excel</el-button>
  <!-- 列表 -->
  <el-table
    :data="tableData"
    border
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="employeeName" label="姓名" />
    <el-table-column prop="departmentName" label="部门" />
    <el-table-column prop="postsName" label="职位" />
    <el-table-column prop="superstratumCharge" label="上级负责人" />
    <el-table-column prop="dateonBoard" label="入职日期">
      <template v-slot="scope">
        {{ scope.row.dateonBoard.substring(0, 10) }}
      </template>
    </el-table-column>
    <el-table-column prop="createDate" label="最后工作日">
      <template v-slot="scope">
        {{ scope.row.createDate.substring(0, 10) }}
      </template>
    </el-table-column>
    <el-table-column prop="reasonforleaving" label="离职原因"></el-table-column>
    <el-table-column prop="approvalDimission" label="审批状态">
      <template v-slot="scope">
        {{
          scope.row.approvalDimission == 1
            ? "待提交"
            : scope.row.approvalDimission == 2
            ? "待审核"
            : scope.row.approvalDimission == 3
            ? "已通过"
            : "已拒绝"
        }}
      </template>
    </el-table-column>
    <el-table-column prop="createDate" label="创建日期">
      <template v-slot="scope">
        {{ scope.row.createDate.substring(0, 10) }}
      </template>
    </el-table-column>
    <el-table-column label="审批人" />
    <el-table-column label="操作">
      <template v-slot="scope">
        <el-link
          type="primary"
          v-if="scope.row.approvalDimission == 1"
          @click="chakan(scope.row.dimissionId)"
          >修改</el-link
        >
        <el-link
          type="primary"
          v-if="scope.row.approvalDimission == 1"
          @click="shanchu(scope.row.dimissionId)"
          >删除</el-link
        >
        <el-link
          type="primary"
          v-if="scope.row.approvalDimission == 1"
          @click="tijiao(scope.row.dimissionId)"
          >提交</el-link
        >
        <el-link type="primary" @click="xiang(scope.row.dimissionId)">查看</el-link>
      </template>
    </el-table-column>
  </el-table>
  <div>
    <el-pagination
      v-model:current-page="infor.pageindex"
      v-model:page-size="infor.pagesize"
      :page-sizes="[5, 10, 15, 20]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="infor.listcount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import axios from 'axios';
import {ref,onMounted} from 'vue';
import { ElMessage,ElMessageBox, type ComponentSize} from 'element-plus'
import { useRouter } from 'vue-router';
const router=useRouter();
const tableData = ref([])
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)
onMounted(()=>{
  GetDimission();
})
const xiang=(id:number)=>{
  router.push({
    path:"/ResignXiang",
    query:{
      id:id
    }
  })
}
const tijiao=(id:number)=>{
axios({
   method:"post",
   url:"empwrite/api/Resign/UpdateStateResgin",
   data:{
    id:id
   }
})
.then(res=>{
  if(res.data.data>0){
    ElMessage.success("提交成功")
    GetDimission();
  }
  else{
    ElMessage.error("提交失败")
  }
})
}
//分页
const handleSizeChange = (val: number) => {
  infor.value.pagesize=val;
  GetDimission();
}
const handleCurrentChange = (val: number) => {
  infor.value.pageindex= val;
  GetDimission();
}
const chakan=(id:number)=>{
  router.push({
    path:"/ResignUpdate",
    query:{
      id:id
    }
  })
}
const infor=ref({
    employeeName:"",
    departmentName:"",
    postsName:"",
    dateonBoard:"",
    createDate:"",
    approvalDimission:"",
    pageindex:1,
    pagesize:5,
    pagecount:0,
    listcount:0
})
const Department = ref([
    { label: 'CEO', value: 1 },
    { label: '财务部', value: 2 },
    { label: '运营部', value: 3 },
    { label: '人事部', value: 4 },
    { label: '策划部', value: 5 },
])

const Positions = ref([
    { label: '董事长', value: 1},
    { label: '财务部长', value: 2},
    { label: '运营部长', value: 3},
    { label: '人事部长', value: 4},
    { label: '策划部长', value: 5},
])
const Position:any=ref([]);
const bumen=(id:number)=>{
  Position.value = Positions.value.filter(positions => positions.value == id);
  const selectedPosition = Department.value.find(position => position.value === id);
    if (selectedPosition) {
      infor.value.departmentName = selectedPosition.label;
    }
}
const zhiwei=(id:number)=>{
  const selectedPosition = Positions.value.find(position => position.value === id);
    if (selectedPosition) {
        infor.value.postsName = selectedPosition.label;
    }
}
const JumptoNew=()=>{
    router.push("/ResignAdd")
}
const GetDimission=()=>{
    axios({
        method:"get",
        url:"empread/api/Resign/GetDimission",
        params:{
            employeeName:infor.value.employeeName,
            departmentName:infor.value.departmentName,
            postsName:infor.value.postsName,
            dateonBoard:infor.value.dateonBoard,
            createDate:infor.value.createDate,
            approvalDimission:infor.value.approvalDimission||0,
            pageindex:infor.value.pageindex,
            pagesize:infor.value.pagesize
        }
    })
    .then(res=>{
        tableData.value=res.data.data.plist
        infor.value.pagecount=res.data.data.pagecount
        infor.value.listcount=res.data.data.plistcount
    })
}
const resetForm = () => {
    infor.value.employeeName=""
    infor.value.departmentName=""
    infor.value.postsName=""
    infor.value.createDate=""
    infor.value.approvalDimission=""
}
const multipleSelection=ref([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
}
///批量删除
const DeletePersonnel=()=>{
  ElMessageBox.confirm(
    '你确认要删除吗?',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      var dd=multipleSelection.value.map((x:any)=>x.dimissionId)
      axios({
        method:"post",
        url:"empwrite/api/Resign/DeleteResgin",
        data:{
          id:dd
        }
      })
  .then(res=>{
    if(res.data.data>0){
      ElMessage.success("删除成功")
      GetDimission();
    }
    else{
      ElMessage.error("删除失败")
    }
  })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })

}
const shanchu=(id:number)=>{
    ElMessageBox.confirm(
    '你确认要删除吗?',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        console.log(id);
      axios({
        method:"post",
        url:"empwrite/api/Resign/DeleteByIdResgin",
        params:{
          id:id
        }
      })
  .then(res=>{
    if(res.data.data>0){
      ElMessage.success("删除成功")
      GetDimission();
    }
    else{
      ElMessage.error("删除失败")
    }
  })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })

}
//在组件中导入xlsx库
import * as XLSX from 'xlsx';
const exportExcel = () => {
  //准备要导出的数据
  //将数据转换为工作表（Worksheet）对象
    const worksheet = XLSX.utils.json_to_sheet(multipleSelection.value);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
    //创建工作簿（Workbook）对象并添加工作表
    const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const fileName = '人员离职登记导出数据.xlsx';
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = fileName;
    link.click();
    //导出 Excel 文件
    URL.revokeObjectURL(link.href);
};
</script>
